<template>
  <div>
    <template v-for="(item, index) in items" :key="index">
      <MenuItem
        :icon="item.icon"
        :action="item.action"
        :title="item.title"
        :is-active="item.isActive"
      />
    </template>
  </div>
</template>

<script setup lang="ts">
import MenuItem from "../menuItem/index.vue";
import { defineProps, reactive } from "vue";
import { PropType } from "vue";
type EditorType = {
  chain: Function;
  isActive: Function;
};
const props = defineProps({
  editor: {
    type: Object as PropType<EditorType>,
    required: true,
  },
});

const items = reactive([
  {
    icon: "bold",
    title: "加粗",
    action: () => props.editor.chain().focus().toggleBold().run(),
    isActive: () => props.editor.isActive("bold"),
  },
  {
    icon: "italic",
    title: "斜体",
    action: () => props.editor.chain().focus().toggleItalic().run(),
    isActive: () => props.editor.isActive("italic"),
  },
  {
    icon: "strikethrough",
    title: "中划线",
    action: () => props.editor.chain().focus().toggleStrike().run(),
    isActive: () => props.editor.isActive("strike"),
  },
  {
    icon: "code-view",
    title: "code",
    action: () => props.editor.chain().focus().toggleCode().run(),
    isActive: () => props.editor.isActive("code"),
  },
  {
    icon: "mark-pen-line",
    title: "Highlight",
    action: () => props.editor.chain().focus().toggleHighlight().run(),
    isActive: () => props.editor.isActive("highlight"),
  },
  {
    icon: "h-1",
    title: "一级标题",
    action: () =>
      props.editor.chain().focus().toggleHeading({ level: 1 }).run(),
    isActive: () => props.editor.isActive("heading", { level: 1 }),
  },
  {
    icon: "h-2",
    title: "二级标题",
    action: () =>
      props.editor.chain().focus().toggleHeading({ level: 2 }).run(),
    isActive: () => props.editor.isActive("heading", { level: 2 }),
  },
  {
    icon: "h-3",
    title: "三级标题",
    action: () =>
      props.editor.chain().focus().toggleHeading({ level: 3 }).run(),
    isActive: () => props.editor.isActive("heading", { level: 3 }),
  },
  {
    icon: "paragraph",
    title: "段落",
    action: () => props.editor.chain().focus().setParagraph().run(),
    isActive: () => props.editor.isActive("paragraph"),
  },
  {
    icon: "list-unordered",
    title: "列表",
    action: () => props.editor.chain().focus().toggleBulletList().run(),
    isActive: () => props.editor.isActive("bulletList"),
  },
  {
    icon: "list-ordered",
    title: "有序列表",
    action: () => props.editor.chain().focus().toggleOrderedList().run(),
    isActive: () => props.editor.isActive("orderedList"),
  },
  {
    icon: "list-check-2",
    title: "任务列表",
    action: () => props.editor.chain().focus().toggleTaskList().run(),
    isActive: () => props.editor.isActive("taskList"),
  },
  {
    icon: "align-left",
    title: "左对齐",
    action: () => props.editor.chain().focus().setTextAlign("left").run(),
    isActive: () => props.editor.isActive({ textAlign: "left" }),
  },
  {
    icon: "align-center",
    title: "居中",
    action: () => props.editor.chain().focus().setTextAlign("center").run(),
    isActive: () => props.editor.isActive({ textAlign: "center" }),
  },
  {
    icon: "align-right",
    title: "右对齐",
    action: () => props.editor.chain().focus().setTextAlign("right").run(),
    isActive: () => props.editor.isActive({ textAlign: "right" }),
  },
  {
    icon: "code-box-line",
    title: "代码块",
    action: () => props.editor.chain().focus().toggleCodeBlock().run(),
    isActive: () => props.editor.isActive("codeBlock"),
  },

  {
    icon: "double-quotes-l",
    title: "引用",
    action: () => props.editor.chain().focus().toggleBlockquote().run(),
    isActive: () => props.editor.isActive("blockquote"),
  },
  {
    icon: "separator",
    title: "分割线",
    action: () => props.editor.chain().focus().setHorizontalRule().run(),
    isActive: () => {
      return false;
    },
  },

  {
    icon: "text-wrap",
    title: "换行",
    action: () => props.editor.chain().focus().setHardBreak().run(),
    isActive: () => {
      return false;
    },
  },
  {
    icon: "format-clear",
    title: "清除格式",
    action: () =>
      props.editor.chain().focus().clearNodes().unsetAllMarks().run(),
    isActive: () => {
      return false;
    },
  },

  {
    icon: "arrow-go-back-line",
    title: "后退",
    action: () => props.editor.chain().focus().undo().run(),
    isActive: () => {
      return false;
    },
  },
  {
    icon: "arrow-go-forward-line",
    title: "前进",
    action: () => props.editor.chain().focus().redo().run(),
    isActive: () => {
      return false;
    },
  },
]);
</script>

<style lang="scss" scoped>
.divider {
  width: 2px;
  height: 1.25rem;
  background-color: rgba(#000, 0.1);
  margin-left: 0.5rem;
  margin-right: 0.75rem;
}
</style>
